// 这个文件是用来实现页面访问权限的(导航守卫)
import router from '@/router' // 直接写文件夹的情况下，会自动查找里面名字叫index的文件
import store from '@/store'

// 导航守卫
router.beforeEach(async(to, from, next) => {
  if (store.state.user.token) {
    // 已登录
    if (to.path === '/login') {
      next('/')
    } else {
      //  获取用户信息
      //  当用户信息ID不存在的时候才调用
      if (!store.state.user.UserInfo.userId) {
        //  用户拉取到信息之后才放
        await store.dispatch('user/getUserInfo')
        // 为了保证能够获取到menus权限点数据，我们需要在这个地方来调用筛选具有权限的动态路由数据的函数
        const route = await store.dispatch('permission/filterRoutes',
          store.state.user.UserInfo.roles.menus)
        // 把筛选出来的具有访问权限的路由对象添加到路由规则里面，这样我们才能恢复路由页面访问功能
        // 路由专门提供了一个方来实现这个功能,这个方法就是addRoutes
        // router.addRoutes(route)
        // 问题：访 问动态路由页面，刷新浏览器，会跳转到404页面
        // 因为刷新浏览器时，会清空保存在vuex中的动态路由数据，访问不到动态路由页面就会去找404页面，如果404页面也找不到，就会出现一片空白
        // 答：把404页面从静态路由中移除，然后在添加动态路由的时候把404重新加载回来
        router.addRoutes([...route, { path: '*', redirect: '/404', hidden: true }])
        // 问题：访问动态路由页面后，刷新浏览器会出现一片空白
        // 因为跳转的时候找不到目标路由对象 就会出现一片空白
        // 答：当我们获取到动态路由数据之后，重新再跳转一次到目标路由中即刻
        next(to.path) // 执行next(to.path) 会再次经过导航守卫
      }
      next()
    }
  } else {
    // 未登录
    // 404页面和登录页面 不需要登录也能直接进入
    const whiteArr = ['/login', '/404']
    // if (to.path === '/login' || to.path === '/404') {
    if (whiteArr.includes(to.path)) {
      next()
    } else {
      next('/login')
    }
  }
})

